import {Image, InfiniteScroll, List} from 'antd-mobile'
// mock数据
import {useEffect, useState} from "react";
import {fetchListAPI, ListRes} from "@/apis/list.ts";
import {useNavigate} from "react-router-dom";

type Props = {
    channelId: string
}

const HomeList = (props: Props) => {
    const {channelId} = props
    //获取列表数据
    const [listRes,setListRes] = useState<ListRes>({
        results:[],
        pre_timestamp: '' + new Date().getTime()
    })
    useEffect(() => {
        const getList = async () =>{
            try {
                const res = await fetchListAPI({
                    channel_id: channelId,
                    timestamp:  '' + new Date().getTime()
                })
                setListRes({
                    results: res.data.data.results,
                    pre_timestamp: res.data.data.pre_timestamp
                })
            }catch (error) {
                throw new Error('fetch list error')
            }
        }
        getList()
    }, [channelId]);

    // 开关 标记当前是否还有新数据
    const  [hasMore,setHasMore] = useState(true)

    //加载下一页的函数
    const  loadMore = async () => {
        //编写核心逻辑
        try {
            const res = await fetchListAPI({
                channel_id: channelId,
                timestamp:  listRes.pre_timestamp
            })

            setListRes({
                results: [...listRes.results,...res.data.data.results],
                pre_timestamp: res.data.data.pre_timestamp
            })
            //停止监听
            if(res.data.data.results.length === 0){
                setHasMore(false)
            }
        }catch (error) {
            throw new Error('fetch list error')
        }
    }

    const navigate = useNavigate()
    const goToDetail = (id: string) => {
        //路由跳转
        navigate(`/detail?id=${id}`)
    }

    return (
        <>
            <List>
                {listRes.results.map((item) => (
                    <List.Item
                        onClick={() => goToDetail(item.art_id)}
                        key={item.art_id}
                        prefix={
                            <Image
                                src={item.cover.images?.[0]}
                                style={{ borderRadius: 20 }}
                                fit="cover"
                                width={40}
                                height={40}
                            />
                        }
                        description={item.pubdate}
                    >
                        {item.title}
                    </List.Item>
                ))}
            </List>
            <InfiniteScroll loadMore={loadMore} hasMore={hasMore} threshold={5}/>
        </>
    )
}

export default HomeList